import { View, Text, ViewProps } from "@tarojs/components";
import { TValue, Option } from "@/types";
import "./index.less";

type Props = {
  options?: Option[];
  value: TValue;
  onChange: (value: TValue) => void;
  className?: string;
} & ViewProps;
const RadioText = ({
  options = [],
  value,
  onChange,
  className = "",
  ...others
}: Props) => {
  return (
    <View className={`radio-text ${className}`} {...others}>
      {options.length > 0 &&
        options.map((item) => {
          const selected = item.value === value;
          return (
            <>
              <View
                key={item.value}
                className={`radio-text-item ${selected ? "selected" : ""}`}
                onClick={() => {
                  if (value === item.value) {
                    return;
                  }
                  onChange(item.value);
                }}
              >
                {item.label}
              </View>
            </>
          );
        })}
    </View>
  );
};

export default RadioText;
